<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">节流</button>
    <script>

        // 函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。
        btn.onclick = throttle(cb,2000);

        function throttle(callback,time) {
            let pre = 0;
            return function (e) {
                console.log('throttle');
                const now = Date.now(); // 时间戳(当前事件发生的时间)
                if (now - pre > time) {
                    // 调用回调处理：要通过call来指定this和参数
                    callback.call(this,e);
                    console.log(e);
                    // 记录最新的处理时间
                    pre = now;
                }
            }
        }

        function cb(e) {
            console.log('节流',e.target);
        }
        // 函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。
    </script>
</body>

</html>